<template>
  <div class="material-flow-container">
    <!-- 实时数据面板 -->
    <div class="real-time-data-panel">
      <div class="panel-header">实时数据</div>
      <div class="data-items">
        <div class="data-item">
          <span class="label">温度:</span>
          <span class="value">{{ realTimeData.temperature }}°C</span>
        </div>
        <div class="data-item">
          <span class="label">压力:</span>
          <span class="value">{{ realTimeData.pressure }} MPa</span>
        </div>
        <div class="data-item">
          <span class="label">流量:</span>
          <span class="value">{{ realTimeData.flow }} m³/h</span>
        </div>
        <div class="data-item">
          <span class="label">产量:</span>
          <span class="value">{{ realTimeData.output }} t/h</span>
        </div>
      </div>
    </div>

    <!-- 流动速度控制面板 -->
    <!-- <div class="flow-control-panel">
      <div class="panel-header">流动控制</div>
      <div class="control-item">
        <span class="label">速度:</span>
        <input
          type="range"
          min="0.5"
          max="2.0"
          step="0.1"
          v-model="flowSpeed"
          class="speed-slider"
        />
        <span class="value">{{ flowSpeed }}x</span>
      </div>
    </div> -->

    <!-- Canvas流程图容器 -->
    <canvas
      ref="flowCanvas"
      class="flow-canvas"
      @mousemove="handleMouseMove"
    ></canvas>

    <!-- 工业设备图片覆盖层 -->
    <div class="equipment-overlay">
      <div class="equipment-item" style="left: 50px; top: 20px;">
        <img src="/images/neng1.png" alt="原料仓" />
        <div class="equipment-label">原料仓</div>
      </div>
      <div class="equipment-item" style="left: 430px; top: 10px;">
        <img src="/images/neng2.png" alt="输送带" />
        <div class="equipment-label">输送带</div>
      </div>
      <div class="equipment-item" style="left: 50px; top: 250px;">
        <img src="/images/neng3.png" alt="回转窑" />
        <div class="equipment-label">回转窑</div>
      </div>
      <div class="equipment-item" style="left: 430px; top: 340px;">
        <img src="/images/neng4.png" alt="混合机" />
        <div class="equipment-label">混合机</div>
      </div>
      <div class="equipment-item" style="left: 50px; top: 510px;">
        <img src="/images/neng5.png" alt="成品库" />
        <div class="equipment-label">成品库</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'

export default {
  name: 'MaterialFlow2D',
  setup() {
    const flowCanvas = ref(null)
    let ctx = null
    let animationId = null
    let dataInterval = null
    let lastTime = 0
    let particles = []
    let flowPaths = []

    // 流动速度控制
    const flowSpeed = ref(1.0)

    // 鼠标位置（用于交互效果）
    const mousePos = reactive({ x: 0, y: 0 })

    // 实时数据
    const realTimeData = reactive({
      temperature: 850,
      pressure: 2.5,
      flow: 120,
      output: 45
    })

    // 流程路径定义
    const initFlowPaths = () => {
      flowPaths = [
        {
          id: 'path1',
          points: [
            { x: 125, y: 130 }, // 原料仓
            { x: 300, y: 130 },
            { x: 475, y: 130 }  // 输送带
          ],
          gradient: ['#1e3c72', '#2a5298', '#00d4ff'],
          width: 6,
          particles: []
        },
        {
          id: 'path2',
          points: [
            { x: 475, y: 130 }, // 输送带
            { x: 475, y: 250 },
            { x: 475, y: 400 }  // 混合机
          ],
          gradient: ['#00d4ff', '#0099cc', '#006699'],
          width: 6,
          particles: []
        },
        {
          id: 'path3',
          points: [
            { x: 475, y: 400 }, // 混合机
            { x: 300, y: 400 },
            { x: 125, y: 350 },
            { x: 125, y: 300 }  // 回转窑
          ],
          gradient: ['#006699', '#004466', '#002233'],
          width: 6,
          particles: []
        },
        {
          id: 'path4',
          points: [
            { x: 125, y: 350 }, // 回转窑
            { x: 125, y: 450 },
            { x: 125, y: 520 }  // 成品库
          ],
          gradient: ['#002233', '#001122', '#000811'],
          width: 6,
          particles: []
        }
      ]
    }

    // 粒子类
    class FlowParticle {
      constructor(path, index) {
        this.path = path
        this.progress = (index / 20) * -1 // 分散初始位置
        this.size = 2 + Math.random() * 3
        this.opacity = 0.6 + Math.random() * 0.4
        this.speed = 0.008 + Math.random() * 0.004
        this.color = this.getColorAtProgress(0)
        this.trail = []
        this.maxTrailLength = 8
      }

      getColorAtProgress(progress) {
        const colors = this.path.gradient
        const segmentLength = 1 / (colors.length - 1)
        const segment = Math.floor(progress / segmentLength)
        const localProgress = (progress % segmentLength) / segmentLength

        if (segment >= colors.length - 1) {
          return colors[colors.length - 1]
        }

        return this.interpolateColor(colors[segment], colors[segment + 1], localProgress)
      }

      interpolateColor(color1, color2, factor) {
        const c1 = this.hexToRgb(color1)
        const c2 = this.hexToRgb(color2)

        const r = Math.round(c1.r + (c2.r - c1.r) * factor)
        const g = Math.round(c1.g + (c2.g - c1.g) * factor)
        const b = Math.round(c1.b + (c2.b - c1.b) * factor)

        return `rgb(${r}, ${g}, ${b})`
      }

      hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        return result ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16)
        } : { r: 0, g: 0, b: 0 }
      }

      getPositionAtProgress(progress) {
        const points = this.path.points
        if (points.length < 2) return points[0] || { x: 0, y: 0 }

        const totalSegments = points.length - 1
        const segmentProgress = progress * totalSegments
        const segmentIndex = Math.floor(segmentProgress)
        const localProgress = segmentProgress - segmentIndex

        if (segmentIndex >= totalSegments) {
          return points[points.length - 1]
        }

        const p1 = points[segmentIndex]
        const p2 = points[segmentIndex + 1]

        return {
          x: p1.x + (p2.x - p1.x) * localProgress,
          y: p1.y + (p2.y - p1.y) * localProgress
        }
      }

      update(deltaTime, speed) {
        this.progress += this.speed * speed * deltaTime * 0.001

        if (this.progress > 1.2) {
          this.progress = -0.2
          this.trail = []
        }

        if (this.progress >= 0 && this.progress <= 1) {
          const pos = this.getPositionAtProgress(this.progress)
          this.trail.push({ ...pos, opacity: this.opacity })

          if (this.trail.length > this.maxTrailLength) {
            this.trail.shift()
          }

          this.color = this.getColorAtProgress(this.progress)
        }
      }

      draw(ctx) {
        if (this.progress < 0 || this.progress > 1) return

        // 绘制拖尾效果
        for (let i = 0; i < this.trail.length; i++) {
          const point = this.trail[i]
          const trailOpacity = (i / this.trail.length) * point.opacity * 0.6

          ctx.save()
          ctx.globalAlpha = trailOpacity
          ctx.fillStyle = this.color
          ctx.beginPath()
          ctx.arc(point.x, point.y, this.size * (i / this.trail.length), 0, Math.PI * 2)
          ctx.fill()
          ctx.restore()
        }

        // 绘制主粒子
        const pos = this.getPositionAtProgress(this.progress)
        ctx.save()
        ctx.globalAlpha = this.opacity
        ctx.fillStyle = this.color
        ctx.shadowBlur = 8
        ctx.shadowColor = this.color
        ctx.beginPath()
        ctx.arc(pos.x, pos.y, this.size, 0, Math.PI * 2)
        ctx.fill()
        ctx.restore()
      }
    }

    // 初始化粒子系统
    const initParticles = () => {
      particles = []
      flowPaths.forEach(path => {
        path.particles = []
        // 根据路径长度计算粒子密度
        const pathLength = calculatePathLength(path.points)
        const particleCount = Math.floor(pathLength * 0.15) // 0.15个粒子每像素

        for (let i = 0; i < particleCount; i++) {
          const particle = new FlowParticle(path, i)
          path.particles.push(particle)
          particles.push(particle)
        }
      })
    }

    // 计算路径长度
    const calculatePathLength = (points) => {
      let length = 0
      for (let i = 1; i < points.length; i++) {
        const dx = points[i].x - points[i-1].x
        const dy = points[i].y - points[i-1].y
        length += Math.sqrt(dx * dx + dy * dy)
      }
      return length
    }

    // 绘制流体路径
    const drawFlowPath = (ctx, path) => {
      if (path.points.length < 2) return

      const gradient = ctx.createLinearGradient(
        path.points[0].x, path.points[0].y,
        path.points[path.points.length - 1].x, path.points[path.points.length - 1].y
      )

      path.gradient.forEach((color, index) => {
        gradient.addColorStop(index / (path.gradient.length - 1), color)
      })

      // 绘制主路径背景
      ctx.save()
      ctx.strokeStyle = 'rgba(0, 50, 100, 0.3)'
      ctx.lineWidth = path.width + 4
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'
      ctx.shadowBlur = 20
      ctx.shadowColor = 'rgba(0, 212, 255, 0.2)'

      ctx.beginPath()
      ctx.moveTo(path.points[0].x, path.points[0].y)

      // 使用平滑曲线连接
      for (let i = 1; i < path.points.length; i++) {
        if (i === path.points.length - 1) {
          ctx.lineTo(path.points[i].x, path.points[i].y)
        } else {
          const cp1x = path.points[i-1].x + (path.points[i].x - path.points[i-1].x) * 0.3
          const cp1y = path.points[i-1].y + (path.points[i].y - path.points[i-1].y) * 0.3
          const cp2x = path.points[i].x - (path.points[i+1].x - path.points[i].x) * 0.3
          const cp2y = path.points[i].y - (path.points[i+1].y - path.points[i].y) * 0.3

          ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, path.points[i].x, path.points[i].y)
        }
      }

      ctx.stroke()
      ctx.restore()

      // 绘制主路径
      ctx.save()
      ctx.strokeStyle = gradient
      ctx.lineWidth = path.width
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'
      ctx.shadowBlur = 12
      ctx.shadowColor = path.gradient[0]

      ctx.beginPath()
      ctx.moveTo(path.points[0].x, path.points[0].y)

      // 使用平滑曲线连接
      for (let i = 1; i < path.points.length; i++) {
        if (i === path.points.length - 1) {
          ctx.lineTo(path.points[i].x, path.points[i].y)
        } else {
          const cp1x = path.points[i-1].x + (path.points[i].x - path.points[i-1].x) * 0.3
          const cp1y = path.points[i-1].y + (path.points[i].y - path.points[i-1].y) * 0.3
          const cp2x = path.points[i].x - (path.points[i+1].x - path.points[i].x) * 0.3
          const cp2y = path.points[i].y - (path.points[i+1].y - path.points[i].y) * 0.3

          ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, path.points[i].x, path.points[i].y)
        }
      }

      ctx.stroke()
      ctx.restore()

      // 绘制内部高光
      ctx.save()
      ctx.strokeStyle = `rgba(255, 255, 255, 0.4)`
      ctx.lineWidth = path.width * 0.3
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'

      ctx.beginPath()
      ctx.moveTo(path.points[0].x, path.points[0].y)
      for (let i = 1; i < path.points.length; i++) {
        if (i === path.points.length - 1) {
          ctx.lineTo(path.points[i].x, path.points[i].y)
        } else {
          const cp1x = path.points[i-1].x + (path.points[i].x - path.points[i-1].x) * 0.3
          const cp1y = path.points[i-1].y + (path.points[i].y - path.points[i-1].y) * 0.3
          const cp2x = path.points[i].x - (path.points[i+1].x - path.points[i].x) * 0.3
          const cp2y = path.points[i].y - (path.points[i+1].y - path.points[i].y) * 0.3

          ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, path.points[i].x, path.points[i].y)
        }
      }
      ctx.stroke()
      ctx.restore()

      // 绘制流动方向箭头
      drawFlowArrows(ctx, path)

      // 绘制连接点增强效果
      drawConnectionPoints(ctx, path)
    }

    // 绘制连接点增强效果
    const drawConnectionPoints = (ctx, path) => {
      const time = Date.now() * 0.003

      path.points.forEach((point, index) => {
        if (index === 0 || index === path.points.length - 1) {
          // 起点和终点的特殊效果
          const radius = 8 + Math.sin(time + index) * 2
          const alpha = 0.6 + Math.sin(time * 2 + index) * 0.3

          ctx.save()
          ctx.globalAlpha = alpha

          const gradient = ctx.createRadialGradient(point.x, point.y, 0, point.x, point.y, radius)
          gradient.addColorStop(0, path.gradient[index === 0 ? 0 : path.gradient.length - 1])
          gradient.addColorStop(0.7, 'rgba(0, 212, 255, 0.3)')
          gradient.addColorStop(1, 'transparent')

          ctx.fillStyle = gradient
          ctx.beginPath()
          ctx.arc(point.x, point.y, radius, 0, Math.PI * 2)
          ctx.fill()
          ctx.restore()
        }
      })
    }

    // 绘制流动方向箭头
    const drawFlowArrows = (ctx, path) => {
      if (path.points.length < 2) return

      const time = Date.now() * 0.002 * flowSpeed.value
      const arrowSpacing = 60 // 减小箭头间距，增加密度
      const arrowSize = 6 // 稍微减小箭头大小

      // 计算路径总长度
      const pathLength = calculatePathLength(path.points)
      const arrowCount = Math.floor(pathLength / arrowSpacing)

      for (let i = 0; i < arrowCount; i++) {
        // 计算箭头位置，添加动画偏移
        const baseProgress = (i / arrowCount)
        const animatedProgress = (baseProgress + time * 0.3) % 1

        if (animatedProgress < 0 || animatedProgress > 1) continue

        const pos = getPositionAtProgress(path.points, animatedProgress)
        const nextPos = getPositionAtProgress(path.points, Math.min(animatedProgress + 0.005, 1))

        // 计算箭头方向
        const dx = nextPos.x - pos.x
        const dy = nextPos.y - pos.y
        const angle = Math.atan2(dy, dx)

        // 绘制箭头
        ctx.save()
        ctx.translate(pos.x, pos.y)
        ctx.rotate(angle)

        // 箭头透明度动画 - 更平滑的过渡
        const fadeIn = Math.min(animatedProgress * 4, 1)
        const fadeOut = Math.min((1 - animatedProgress) * 4, 1)
        const baseFade = Math.min(fadeIn, fadeOut)
        const pulseFade = 0.7 + 0.3 * Math.sin(time * 3 + i * 0.8)
        const alpha = baseFade * pulseFade

        ctx.globalAlpha = alpha

        // 箭头颜色 - 根据路径位置插值
        const colorIndex = Math.floor(animatedProgress * (path.gradient.length - 1))
        const localProgress = (animatedProgress * (path.gradient.length - 1)) % 1
        let arrowColor = path.gradient[colorIndex]

        if (colorIndex < path.gradient.length - 1) {
          // 在两个颜色之间插值
          const c1 = hexToRgb(path.gradient[colorIndex])
          const c2 = hexToRgb(path.gradient[colorIndex + 1])
          const r = Math.round(c1.r + (c2.r - c1.r) * localProgress)
          const g = Math.round(c1.g + (c2.g - c1.g) * localProgress)
          const b = Math.round(c1.b + (c2.b - c1.b) * localProgress)
          arrowColor = `rgb(${r}, ${g}, ${b})`
        }

        ctx.fillStyle = arrowColor
        ctx.strokeStyle = '#ffffff'
        ctx.lineWidth = 0.5
        ctx.shadowBlur = 4
        ctx.shadowColor = arrowColor

        // 绘制箭头形状 - 更流线型
        ctx.beginPath()
        ctx.moveTo(arrowSize, 0)
        ctx.lineTo(-arrowSize * 0.4, -arrowSize * 0.5)
        ctx.lineTo(-arrowSize * 0.2, 0)
        ctx.lineTo(-arrowSize * 0.4, arrowSize * 0.5)
        ctx.closePath()

        ctx.fill()
        ctx.stroke()
        ctx.restore()
      }
    }

    // 颜色转换辅助函数
    const hexToRgb = (hex) => {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : { r: 0, g: 0, b: 0 }
    }

    // 获取路径上指定进度位置的坐标
    const getPositionAtProgress = (points, progress) => {
      if (points.length < 2) return points[0] || { x: 0, y: 0 }

      const totalSegments = points.length - 1
      const segmentProgress = progress * totalSegments
      const segmentIndex = Math.floor(segmentProgress)
      const localProgress = segmentProgress - segmentIndex

      if (segmentIndex >= totalSegments) {
        return points[points.length - 1]
      }

      const p1 = points[segmentIndex]
      const p2 = points[segmentIndex + 1]

      return {
        x: p1.x + (p2.x - p1.x) * localProgress,
        y: p1.y + (p2.y - p1.y) * localProgress
      }
    }

    // 动画循环
    const animate = (currentTime) => {
      if (!ctx) return

      const deltaTime = currentTime - lastTime
      lastTime = currentTime

      // 清空画布
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)

      // 绘制流程路径
      flowPaths.forEach(path => {
        drawFlowPath(ctx, path)
      })

      // 更新和绘制粒子
      particles.forEach(particle => {
        particle.update(deltaTime, flowSpeed.value)
        particle.draw(ctx)
      })

      // 绘制分支合并效果
      drawBranchEffects(ctx)

      animationId = requestAnimationFrame(animate)
    }

    // 绘制分支合并效果
    const drawBranchEffects = (ctx) => {
      // 在关键节点绘制能量汇聚效果
      const keyNodes = [
        { x: 475, y: 130, intensity: 0.8 }, // 输送带
        { x: 475, y: 400, intensity: 1.0 }, // 混合机
        { x: 125, y: 300, intensity: 0.9 }  // 回转窑
      ]

      keyNodes.forEach(node => {
        const time = Date.now() * 0.003
        const radius = 15 + Math.sin(time + node.x * 0.01) * 5

        ctx.save()
        ctx.globalAlpha = 0.4 * node.intensity

        const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, radius)
        gradient.addColorStop(0, '#00d4ff')
        gradient.addColorStop(0.5, '#0099cc')
        gradient.addColorStop(1, 'transparent')

        ctx.fillStyle = gradient
        ctx.beginPath()
        ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
        ctx.fill()
        ctx.restore()
      })
    }

    // 初始化Canvas
    const initCanvas = () => {
      if (!flowCanvas.value) return

      const canvas = flowCanvas.value
      const rect = canvas.parentElement.getBoundingClientRect()

      // 设置Canvas尺寸
      canvas.width = rect.width * window.devicePixelRatio
      canvas.height = rect.height * window.devicePixelRatio
      canvas.style.width = rect.width + 'px'
      canvas.style.height = rect.height + 'px'

      ctx = canvas.getContext('2d')
      ctx.scale(window.devicePixelRatio, window.devicePixelRatio)

      // 初始化流程路径和粒子
      initFlowPaths()
      initParticles()

      // 开始动画
      lastTime = performance.now()
      animate(lastTime)
    }

    // 处理鼠标移动
    const handleMouseMove = (event) => {
      const rect = event.target.getBoundingClientRect()
      mousePos.x = event.clientX - rect.left
      mousePos.y = event.clientY - rect.top
    }

    // 更新实时数据
    const updateRealTimeData = () => {
      realTimeData.temperature = 850 + Math.floor(Math.random() * 50) - 25
      realTimeData.pressure = 2.5 + (Math.random() - 0.5) * 0.5
      realTimeData.flow = 120 + Math.floor(Math.random() * 20) - 10
      realTimeData.output = 45 + Math.floor(Math.random() * 10) - 5
    }

    // 监听流动速度变化
    watch(flowSpeed, (newSpeed) => {
      // 可以在这里添加速度变化的反馈效果
      console.log('Flow speed changed to:', newSpeed)
    })

    // 窗口大小变化处理
    const handleResize = () => {
      if (animationId) {
        cancelAnimationFrame(animationId)
      }
      setTimeout(initCanvas, 100)
    }

    onMounted(() => {
      // 初始化Canvas
      setTimeout(initCanvas, 100)

      // 启动数据更新
      dataInterval = setInterval(updateRealTimeData, 3000)

      // 监听窗口大小变化
      window.addEventListener('resize', handleResize)
    })

    onBeforeUnmount(() => {
      // 清理定时器
      if (dataInterval) {
        clearInterval(dataInterval)
      }

      // 清理动画
      if (animationId) {
        cancelAnimationFrame(animationId)
      }

      // 清理事件监听
      window.removeEventListener('resize', handleResize)
    })

    return {
      flowCanvas,
      realTimeData,
      flowSpeed,
      handleMouseMove
    }
  }
}
</script>

<style scoped>
.material-flow-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
  overflow: hidden;
}

/* 实时数据面板 */
.real-time-data-panel {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 200px;
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid #00f2f1;
  border-radius: 8px;
  padding: 15px;
  z-index: 1000;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 242, 241, 0.3);
}

/* 流动控制面板 */
.flow-control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 200px;
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid #00d4ff;
  border-radius: 8px;
  padding: 15px;
  z-index: 1000;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

.panel-header {
  color: #00f2f1;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 242, 241, 0.3);
  padding-bottom: 8px;
}

.flow-control-panel .panel-header {
  color: #00d4ff;
  border-bottom-color: rgba(0, 212, 255, 0.3);
}

.control-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-item .label {
  color: #9fe6b8;
  font-size: 12px;
  margin-bottom: 4px;
}

.speed-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 212, 255, 0.2);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(45deg, #00d4ff, #0099cc);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
  transition: all 0.3s ease;
}

.speed-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.8);
}

.speed-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(45deg, #00d4ff, #0099cc);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
  transition: all 0.3s ease;
}

.speed-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.8);
}

.control-item .value {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background: rgba(0, 212, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.data-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.data-item .label {
  color: #9fe6b8;
  font-size: 12px;
}

.data-item .value {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

/* Canvas流程图容器 */
.flow-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: crosshair;
}

/* 设备图片覆盖层 */
.equipment-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.equipment-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.equipment-item:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.8));
}

.equipment-item img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 242, 241, 0.4));
  transition: all 0.3s ease;
}

.equipment-label {
  margin-top: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 242, 241, 0.6);
  background: rgba(0, 20, 40, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 242, 241, 0.3);
  backdrop-filter: blur(5px);
}

/* 性能优化 - 硬件加速 */
.flow-canvas,
.equipment-overlay,
.real-time-data-panel,
.flow-control-panel {
  will-change: transform;
  transform: translateZ(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .real-time-data-panel,
  .flow-control-panel {
    width: 160px;
    padding: 10px;
  }

  .real-time-data-panel {
    bottom: 10px;
    right: 10px;
  }

  .flow-control-panel {
    top: 10px;
    right: 10px;
  }

  .panel-header {
    font-size: 12px;
  }

  .data-item .label,
  .data-item .value,
  .control-item .label,
  .control-item .value {
    font-size: 10px;
  }

  .equipment-item img {
    width: 100px;
    height: 100px;
  }

  .equipment-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .real-time-data-panel,
  .flow-control-panel {
    width: 140px;
    padding: 8px;
  }

  .equipment-item img {
    width: 80px;
    height: 80px;
  }

  .equipment-label {
    font-size: 10px;
  }
}

/* 流体动画增强效果 */
@keyframes fluid-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.equipment-item:hover img {
  animation: fluid-pulse 2s ease-in-out infinite;
}

/* 粒子系统性能优化 */
.flow-canvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  image-rendering: crisp-edges;
}

/* 流动效果增强 */
.equipment-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.equipment-item:hover::before {
  opacity: 1;
  animation: fluid-pulse 2s ease-in-out infinite;
}

/* 高性能渲染优化 */
* {
  box-sizing: border-box;
}

.material-flow-container * {
  backface-visibility: hidden;
  perspective: 1000px;
}
</style>
